<template>
  <div>
    <div v-if="!showJz">
      <div
        v-if="selQk != '整体'"
        class="flex-row-start-center left-title"
        style="margin-top: -54px"
      >
        <div class="left-title-qk flex-row-center-center">{{ kqName }}</div>
        <div class="left-title-id flex-row-center-center">{{kqId}}</div>
      </div>
      <div v-if="selQk == '整体'">
        <kq-num :selQk="selQk" :kqNum="kqNum" :showJz="showJz"></kq-num>
      </div>
      <div v-else>
        <kq-state :selQk="selQk" :kqState="kqState" @show-to-event="toShowEventType" :showJz="showJz"></kq-state>
      </div>
      <kq-area class="normal" :selQk="selQk" :kqArea="kqArea" :showJz="showJz"></kq-area>
      <jz-num class="normal" :selQk="selQk" :jzNum="jzNum" :showJz="showJz"></jz-num>
      <jc-num class="normal" :selQk="selQk" :jcdNum="jcdNum" :showJz="showJz"></jc-num>
      <div v-if="selQk == '整体'">
        <kq-table style="margin-top: 8px; margin-bottom: 10px" :selQk="selQk" :kqList="kqList" :showJz="showJz"></kq-table>
      </div>
      <div v-else>
        <jz-table style="margin-top: 8px; margin-bottom: 10px" :selQk="selQk" :jzList="jzList" :showJz="showJz"></jz-table>
      </div>
    </div>
    <div v-else>
      <div
        class="flex-row-start-center left-title"
        style="margin-top: -54px"
      >
        <div class="left-title-qk flex-row-center-center">井组</div>
        <div class="left-title-id flex-row-center-center">{{jzName}}</div>
      </div>
      <jz-state :jzState="jzIndexList.jzState" @show-to-event="toShowEventType" ></jz-state>
      <jk-point class="normal" :jzPoint="jzIndexList.jzPoint" :selQk="selQk" :jzId="jzId" :showJz="showJz"></jk-point>
      <jc-num class="normal" :jcdNum="jzIndexList.jcdNum" :jzId="jzId" :showJz="showJz" :selQk="selQk"></jc-num>
      <his-event class="normal" :eventList="jzIndexList.eventList"></his-event>
    </div>
  </div>
</template>
<script>
import KqNum from "@/components/index/leftside/kqNum.vue";
import KqState from "@/components/index/leftside/kqState.vue";
import KqArea from "@/components/index/leftside/kqArea.vue";
import JzNum from "@/components/index/leftside/jzNum.vue";
import JcNum from "@/components/index/leftside/jcNum.vue";
import kqTable from "@/components/index/leftside/kqTable.vue";
import jzState from "@/components/index/leftside/jzState.vue";
import jkPoint from "@/components/index/leftside/jkPoint.vue";
import hisEvent from "@/components/index/leftside/hisEvent.vue";
import jzTable from "@/components/index/leftside/jzTable.vue";
export default {
  components: {
    KqNum,
    KqArea,
    JzNum,
    JcNum,
    kqTable,
    KqState,
    jzState,
    jkPoint,
    hisEvent,
    jzTable,
  },
  data() {
    return {

    };
  },
  props: {
    selQk: String,
    showJz: Boolean,
    kqNum:Number,
    kqArea:Number,
    jzNum:Number,
    kqState:String,
    jzList:Array,
    kqId:String,
    jcdNum:Number,
    kqList:Array,
    kqName:String,
    jzId:String,
    jzName:String,
    jzIndexList:Object
  },
  watch: {
      jzIndexList(val){
        
      },
  },
  methods: {
    toShowEventType(val){
       this.$emit('trans-to-event',val)
    }
  },
  mounted() {
  },
};
</script>
<style scoped>
.normal {
  margin-top: 16px;
}
.left-title {
  margin-bottom: 9px;
  height: 45px;
  border: 3px solid #ff5454;
  width: 282px;
  font-size: 28px;
  font-family: Roboto;
  color: black;
}
.left-title-qk {
  width: 141px;
  border-right: 3px solid #ff5454;
  height: 100%;
}
.left-title-id {
  width: 141px;
  /* border-right: 3px solid #ff5454; */
  height: 100%;
}
</style>